<template>
  <div class="container">
    <div class="title">事故案例情况</div>
    <!-- <div class="item">
      <div class="item-title">现场视频</div>
      <el-select
        v-model="selectValue"
        filterable
        placeholder="请选择"  
        @change="selectValueChange"
        style="width: 90%;margin: 10px 20px;"      
      >
        <el-option
          v-for="item in options"
          :key="item.bgname"
          :label="item.bgname"
          :value="item.bgname"
        />
      </el-select>
      <div class="video">
        <video 
          :src="videoUrl"
          autoplay
          controls
          muted
          width="300" 
          height="200"
        ></video>
      </div>
      <div class="bridge-name">{{ selectValue }}</div>
    </div> -->
    <div class="item">
      <div class="top">
        <div style="display: flex;">
          <div class="name">辖区事故概况</div>
          <img src="../../static/images/bridgeAreaControl/tips-icon.png" @click="showPopup = true;">
        </div>        
        <el-select
          v-model="year"
          placeholder="请选择"  
          @change="yearChange"
          style="width: 30%;"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.year"
            :label="item.year"
            :value="item.year"
          />
        </el-select>
      </div>
      <van-popup v-model:show="showPopup" round position="bottom">
        <div class="explain">
          <div>事故等级根据人员伤亡数量和污染数量根据以下标准自动生成(后续执法人员可结合实际经济损失在“事故报告”中进行修改)：</div>
          <div>(一)特别重大事故，指造成30 人以上死亡(含失踪)的，或者100 人以上重伤的，或者船舶溢油1000 吨以上致水域污染的，或者1亿元以上直接经济损失的事故；</div>
          <div>(二)重大事故，指造成10 人以上30 人以下死亡(含失踪)的，或者50 人以上100 人以下重伤的，或者船舶溢油500 吨以上1000 吨以下致水域污染的，或者5000 万元以上1 亿元以下直接经济损失的事故；</div>
          <div>(三)较大事故，指造成3 人以上10 人以下死亡(含失踪)的,或者10 人以上50 人以下重伤的，或者船舶溢油100 吨以上500 吨以下致水域污染的，或者1000 万元以上5000 万元以下直接经济损失的事故；</div>
          <div>(四)一般事故，指造成1 人以上3 人以下死亡(含失踪)的，或者1 人以上10 人以下重伤的或者船舶溢油1 吨以上100 吨以下致水域污染的，或者100 万元以上1000 万元以下直接经济损失的事故；</div>
        </div>
        <div class="btn" @click="showPopup = false;">我知道了</div>
      </van-popup>
      <div class="count">
        <div class="count-item" style="margin-right: 16px;">
          <div class="name">事故总数</div>
          <div class="value">{{ accidentTotal }}</div>
        </div>
        <div class="count-item">
          <div class="name">最近一次事故时间</div>
          <div class="value">{{ recentTime }}</div>
        </div>
      </div>
      <div id="pie-chart"></div>
      <div class="pie-table">
        <div class="pie-tbody">
          <div class="pie-tr" v-for="(item,index) in pieChartData" :key="index">
            <div style="display: flex;align-items: center;">
              <div class="li" :style="`background:${item.itemStyle?item.itemStyle.color:''}`"></div>
              <div class="pie-td">{{ item.name }}</div>
            </div>     
            <div class="pie-td">{{ item.value }}</div>  
          </div>
        </div>
      </div>
      <div class="top">
        <div class="name">事故列表</div>
      </div>
      <div class="table-box">
        <div class="table" style="width: 660px;">
          <table
            style="border-collapse: collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <thead style="background: rgba(45,120,237,0.1);position: sticky;top: -1px;">
              <tr>                 
                <th style="width: 120px">事故桥梁</th>
                <th style="width: 120px">事故船舶</th>
                <th style="width: 120px">事故航道</th>
                <th style="width: 120px">事故等级</th>                              
                <th style="width: 180px">发生时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData" :key="index">
                <td style="width: 120px" @click="handleGo(item.accidentBg)">
                  <strong>{{ item.accidentBg }}</strong>
                </td>   
                <td style="width: 120px">{{ item.accidentShip }}</td>   
                <td style="width: 120px">{{ item.accidentHd }}</td>  
                <td style="width: 120px">{{ item.accidentLevel }}</td>                         
                <td style="width: 180px">{{ item.happenDate }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {
    acciSit, //事故概况
    acciVideo, //事故视频
    getSelectList, //获取搜索框列表
    getYearList, //获取年份
  } from "../../utils/bridgeAreaControlApi";

  const selectValue = ref('');
  const showPopup = ref(false);
  const accidentTotal = ref(0);
  const recentTime = ref('');
  const pieChartData = ref([]);
  const tableData = ref([]);

  const year = ref('');
  const yearOptions = ref([]);
  const getYearListFunction = () => {
    getYearList().then((res) => {
      if(res.code === 200){
        year.value = res.data[0].year;
        yearOptions.value = res.data;
        acciSitFunction();
      }
    });
  };  
  const yearChange = () => {
    acciSitFunction();
  };
  const acciSitFunction = () => {
    acciSit({
      year: year.value
    }).then((res) => {
      if(res.code === 200){
        let data = res.data;
        accidentTotal.value = data.accidentTotal;
        recentTime.value = data.recentTime;
        tableData.value = data.accidentList;

        let seriesData = [];    
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        res.data.group.forEach((item,index) => {
          let obj = {
            name: item.accidentLevel,
            value: item.count,
            itemStyle: { 
              color: colorData[index]
            }
          };
          seriesData.push(obj);
        });
        pieChartData.value = seriesData;
        let pieChart = echarts.getInstanceByDom(document.getElementById("pie-chart"));
        if(pieChart != null && pieChart != "" && pieChart != undefined){
          pieChart.dispose();
        }
        pieChart = echarts.init(document.getElementById('pie-chart'));
        let option;
        option = {
          tooltip: {
            trigger: 'item',
            confine: true, //限制在图表区域内   
          },               
          series: [
            {
              type: 'pie',
              radius: ['45%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,          
              },
              labelLine: {
                show: true, //标签连接线
              },  
              data: seriesData
            }
          ],          
        };
        option && pieChart.setOption(option);
      }
    });
  };

  const options = ref([]);
  const getSelectListFunction = () => {
    getSelectList({
      key: ''
    }).then((res) => {
      if(res.code === 200){
        selectValue.value = res.data[0].bgname;
        options.value = res.data;
        acciVideoFunction();
      }
    });
  };

  const selectValueChange = () => {
    acciVideoFunction();
  };

  const videoUrl = ref('');
  const acciVideoFunction = () => {
    acciVideo({
      bridge: selectValue.value
    }).then((res) => {
      if(res.code === 200){
        if(res.data.length){
          videoUrl.value =  `${import.meta.env.VITE_APP_BASE_API}${res.data[1].url}`;
        }else{
          videoUrl.value = '';
        }       
      }
    });
  };

  const handleGo = (value) => {
    router.push({
      path: "/caseAnalysisDetails",
      query: {
        bridge: value
      }
    });
  }; 

  onMounted(() => {
    getSelectListFunction(); 
    getYearListFunction();
  });
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;   
  .title{
    height: 68px;
    background-image:url('../../static/images/bridgeAreaControl/case-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 500; 
    color: #fff;   
  }
  .item{
    margin: 16px 20px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
    border-radius: 8px;
    .item-title{
      background: rgba(22,93,255,0.05);
      font-weight: 500;
      font-size: 18px;
      color: #262626;
      padding: 8px 0px 8px 8px;
    }
    .bridge-name{
      font-weight: 500;
      font-size: 14px;
      color: #8C8C8C;
      text-align: center;
      padding-bottom: 8px;
    }
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      margin: 0 8px;
      border-bottom: 1px solid #F0F0F0;
      .name{
        font-weight: 500;
        font-size: 14px;
        color: #262626;
        position: relative; 
        padding-left: 12px;
      }
      img{
        width: 16px;
        height: 16px;
        padding-left: 4px;
      }
      .name::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 50%;
        left: 4%;
        height: 12px;
        width: 4px;
        transform: translateY(-50%);
      }
    }
    .video{
      text-align: center;
    }
    .explain{
      margin: 16px 20px 8px 20px;
      font-weight: 400;
      font-size: 14px;
      color: #595959;
      div{
        margin-bottom: 8px;
      }
    }
    .btn{
      color: #FFFFFF;
      background: #165DFF;
      border-radius: 8px;
      padding: 10px 0;
      text-align: center;
      margin: 0px 20px 8px 20px;
    }
    .count{
      display: flex;
      margin: 16px 20px 0px 20px;
      .count-item{
        .name{
          font-weight: 400;
          font-size: 12px;
          color: #595959;
        }
        .value{
          font-weight: bold;
          font-size: 20px;
          color: #262626;
          margin-top: 4px;
        }
      }
    }
    #pie-chart{
      height: 180px;
    }
    .pie-table {
      margin: 0 20px;
      .pie-tbody {
        font-size: 14px;
        font-weight: 500;
        .pie-tr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .li{
            width: 8px;
            height: 8px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            border-radius: 50%;
            margin-right: 6px;
          }
        }
      }
    } 
    .table-box {
      // width: 320px;
      // min-height: 100px;
      max-height: 200px;
      overflow: scroll;
      scrollbar-width: none;
      scrollbar-color: transparent;
      -ms-overflow-style: none;
      .table {
        width: 320px;
        // min-height: 100px;
        max-height: 200px;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-color: transparent;
        -ms-overflow-style: none;
        margin: 8px;
        th,
        td {
          padding: 4px;
          color: #595959;
          text-align: center;
        }
        .tbody {
          height: 100px; /* 设置表格体容器的高度 */
          overflow-y: auto; /* 启用垂直滚动条 */
          width: 100%;
          overflow-x: auto;
        }
        tr:nth-child(even) {
          background-color: #f3f7ff;
        }
      }
    }
    .table-box::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
    .table-box::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }
}
</style>